<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>

		body > header{
			margin: 50px auto 20px auto;
			width: 1000px;
			display: flex;
			gap: 20px;
		}

		#wrapper {
			margin: 0 auto;
			position: relative;
			border: 10px solid black;
			height: 500px;
			width: 1000px;
		}

		.item {
			width: 200px;
			height: 100px;
			cursor: default;
			background-color: white;
			border: 1px solid black;
			position: absolute;
			user-select: none;
			border-radius: 4px;
			border: 1px solid #222;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		}

		.item header {
			background-color: #ccc;
			color: black;
			padding: 5px 10px;
		}

		.item main {
			padding: 5px 10px;
		}

		.item.dragging {
			opacity: 0.8;
		}

	</style>
</head>

<body ontouchmove="return false;">

	<header>
		<div>
			网格大小：<input type="range" min="10" max="50" value="20" id="range-gridsize" />
		</div>
		<div>
			点大小：<input type="range" min="1" max="10" value="1" id="range-pointsize" />
		</div>
	</header>
	<div id="wrapper">

		<div id="demo1" class="item">
			<header>demo1</header>
			<main>drag1</main>
		</div>

		<div id="demo2" class="item" style="left: 300px">
			<header>demo2</header>
			<main>drag2</main>
		</div>

	</div>

	<script type="module">

		import { Drag1, Drag2 } from '../dist/index.js';

		let dom_range_gridsize = document.getElementById('range-gridsize');
		let dom_range_pointsize = document.getElementById('range-pointsize');
		let dom_wrapper = document.getElementById('wrapper');

		//绘制背景点
		function drawGridPoint(el, opts = {}){

			let target = el;
			if (typeof target === 'string' && target) {
				target = document.querySelector(target);
			}

			if (!(target instanceof HTMLElement) || !target) {
				return;
			}

			opts = Object.assign({
				gridWidth: 10,
				gridHeight: 10,
				pointSize: 1,
				pointColor: 'black',
			}, opts);


			let canvas = document.createElement('canvas');
			canvas.width = opts.gridWidth;
			canvas.height = opts.gridHeight;
			
			let ctx = canvas.getContext('2d');
			ctx.fillStyle = opts.pointSize;
			ctx.fillRect(opts.gridWidth - opts.pointSize, opts.gridHeight - opts.pointSize, opts.pointSize, opts.pointSize);
			target.style.backgroundImage = `url(${canvas.toDataURL()})`;

		}

		//range事件
		function rangeChange(evt){
			drawGridPoint(dom_wrapper, {
				gridWidth: dom_range_gridsize.value,
				gridHeight: dom_range_gridsize.value,
				pointSize: dom_range_pointsize.value,
			});
		}

		rangeChange();

		dom_range_gridsize.oninput = rangeChange;
		dom_range_pointsize.oninput = rangeChange;

		//传统拖拽
		let d1 = Drag1(document.getElementById('demo1'), {
			onDragMove: (evt, data) => {
				//网格吸附
				let gridSize = dom_range_gridsize.value;
				data.move.targetOffsetX = parseInt(data.move.targetOffsetX / gridSize) * gridSize;
				data.move.targetOffsetY = parseInt(data.move.targetOffsetY / gridSize) * gridSize;
			}
		});

		//平滑过渡效果拖拽
		let d2 = Drag2('#demo2', {
			onDragMove: (evt, data) => {
				//网格吸附
				let gridSize = dom_range_gridsize.value;
				data.move.targetOffsetX = parseInt(data.move.targetOffsetX / gridSize) * gridSize;
				data.move.targetOffsetY = parseInt(data.move.targetOffsetY / gridSize) * gridSize;
			}
		});

	</script>

</body>

</html>